<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>知识库</title>
    <link href="static/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/admin/css/other/console2.css" />
    <!--Jquery-->
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <!--mouce js -->
    <script src="/static/js/mouce.js"></script>
</head>
<body>
<div class="case-container">
    <div class="case-index-title">
        <h2>知识库</h2>
        <a href="/login">点我登录</a>
    </div>
    <div class="case-index-content">
        <!--查询按钮-->
        <div class="layui-card">
            <div class="layui-card-body" >
                <form class="layui-form" action="" style="text-align: center;">
                    <div class="layui-form-item">
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">文件名</label>
                            <div class="layui-input-inline">
                                <input type="text" id="filename"  placeholder=""  class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">类型</label>
                            <div class="layui-input-inline">
                                <select  lay-verify="">
                                    <option value="">请选择文件类型</option>
                                    <option value="010">图片</option>
                                    <option value="021">文档</option>
                                    <option value="0571">招简</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <label class="layui-form-label">上传人</label>
                            <div class="layui-input-inline">
                                <input type="text" id="username"  placeholder=""   class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item layui-inline">
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!--数据表格-->
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="user-table" lay-filter="user-table"></table>
            </div>
        </div>
        
    </div>
</div>

<script type="text/html" id="table-gender">
    {{# if(d.filetype == 1) { }}
    图片
    {{# } else if(d.filetype == 2) { }}
    文档
    {{# } else { }}
    招简
    {{# } }}
</script>


<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
    layui.use(['table','form','jquery','element'],function () {
        let table = layui.table;
        let form = layui.form;
        let $ =  layui.$;

        let cols = [
            [
                {title: '文件标题', field: 'filetitle', align:'center'},
                {title: '文件类型', field: 'filetype', align:'center',templet:'#table-gender'},
                {title: '上传人', field: 'username', align:'center'},
                {title: '上传时间', field: 'date', align:'center'},
                {title: '点击下载', field: 'filevisible',align:'center',sort: true ,templet:addLink}
            ]
        ]
        
        table.render({
            elem: '#user-table',
            url: '/filesList/page',
            where: {filename: '', username: ''},
            cols: cols ,
            skin: 'line',
            toolbar: false,
            page: true
        });

        function addLink(d) {
            return '<a style="text-decoration:underline;color: #1E9FFF" href="/download/'+d.id+'" >下载</a>';
        }
    
     
    
        form.on('submit(user-query)', function(data) {
            // debugger
            var filename = $('#filename').val();
            var username = $('#username').val();
            table.reload('user-table', {
                elem: '#user-table',
                url: '/filesList/page',
                where:{
                    filename:filename,
                    username:username
                },
                cols: cols ,
                skin: 'line',
                toolbar: false,
                page: true
            })
            return false;
        });
        
    })
</script>

</body>
</html>